<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
	<title>title</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" href="../css/aui.css" />
	<link rel="stylesheet" href="../css/public-head.css" />
	<link rel="stylesheet" href="../css/mui.css" />
	<link rel="stylesheet" href="../css/mui.picker.css" />
	<link rel="stylesheet" href="../css/mui.poppicker.css" />
	<link rel="stylesheet" type="text/css" href="../css/AddVehicle.css"/>
</head>

<body>
	<div class="Zhangice">
		<div class="tabulation">
			<div class="tabulation-thread " onclick="selCarBrand()">
				<div class="tabulation-1">品牌车系</div>
				<!--<div class="tabulation-2"></div>-->
				<div class="tabulation-3 " id="car_type_content" name="Brand">
					<img class="img_img" src="../image/icon/ARROWRIGHT@2x.png" /></div>
			</div>

			<div class="tabulation-thread" id="typeid">
				<div class="tabulation-1-1">具体车型</div>
				<div class="tabulation-2-2 carTa"><img class="Taimg" src="../image/icon/GX1@2x.png" /> 小轿车</div>
				<div class="tabulation-3-3 carTa"><img class="Taimg" src="../image/icon/WGX1@2x.png" /> SUV</div>
			</div>
			<div class="tabulation-thread ">
				<div class="tabulation-1">车牌号码</div>
				<div class="tabulation-2-2-2 " id="carnumber">
					<select id="license_content" name="license_name1"></select>
					<img style="margin-left: 10px;margin-top:3px;" src="../image/icon/sanjx@2x.png" />
					<select id="license_content2" name="license_name2"></select>
					<img style="margin-right: 40px;margin-top:3px;" src="../image/icon/sanjx@2x.png" />
				</div>
				<div class="tabulation-3-3"><input type="text" placeholder="请填写车牌号码" class="formPlate" name="car_license" /></div>
			</div>
			<div class="tabulation-thread">
				<div class="tabulation-1">发动机号</div>
				<div class="tabulation-2"><input type="text" placeholder="填写发动机号后6位" class="formPlate" name="engine" id="enginenumber" /></div>
			</div>
			<div class="tabulation-thread">
				<div class="tabulation-1 ">购车日期</div>
				<div class="tabulation-2 ">
					<input type="date" name="dateOfPurchase" id="buydate" class="formPlate">
				</div>
				<div><img class="img_img" style="margin-right: 15px;" src="../image/icon/ARROWRIGHT@2x.png" /></div>
			</div>
			<div class="tabulation-thread">
				<div class="tabulation-1">里 程 数</div>
				<div class="tabulation-2"><input type="text" placeholder="请输入里程数" class="formPlate" name="mileage" id="mileage2"/></div>
			</div>
			<div class="xian">
				<div class="tabulation-1">地 &nbsp;&nbsp;&nbsp;&nbsp; 址</div>
				<div class="tabulation-2"><input type="text" placeholder="请输入常用停车地址(市/区/路/小区/栋/车位)" class="formPlate" name="address" id="area2"/></div>
			</div>

		</div>
		<div class="bat" tapmode onclick="selection()">
			<div>保存</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/template-web.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/mui.poppicker.js"></script>

<!-- 车牌渲染 -->
<script id="license" type="text/html">
	{{each list value i}}
	<option value="{{value}}">{{value}}</option>
	{{/each}}
</script>
<!-- 车牌字母渲染 -->
<script id="license2" type="text/html">
	{{each list value2 i}}
	<option value="{{value2}}">{{value2}}</option>
	{{/each}}
</script>

</html>


<script type="text/javascript">
var typeid ;
	apiready = function() {
		init();
		Status();
		// formAddBrand();
	}
	headInner({
			title: "添加车辆",
			//headleft
			headl: '<a href="#" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
			//headright
			headr: '<a style="color:white"></a>',
			color: "", //默认是蓝色
			padding: "0px 0px 0px",
		})
		//品牌车系
	var carType = {};
	//查询车型
	function Status(values) {
		time = window.setInterval(function() {
			if (!values) {
				getModel();
			} else {
				window.clearInterval(time);
			}
		}, 1000);
	}
	//选择车型
	function selCarBrand() {
		var body_h = $api.offset($api.dom('body'));
		api.openFrame({
			name: 'brand',
			url: '../html/brand.html',
			rect: {
				x: 0,
				y: 0,
				w: 'auto',
				h: 'auto'
			},
			bounces: false,
			pageParam: {
				token: token,
				carType: $api.getStorage('carType')
			}
		});
	}
	//获取车型
	function getModel() {
		car_brand_name = $api.getStorage('car_brand_name');
		car_brand_id = $api.getStorage('car_brand_id');
		if (car_brand_id == null || car_brand_id == undefined) {
			$api.html($api.byId('car_type_content'), '');
		}
		$api.html($api.byId('car_type_content'), car_brand_name);

	}


	//保存添加车辆
	function addform() {
			byValue = fromsub("formPlate")
			console.log(JSON.stringify(byValue));
		BASE.MYajax({
			'pathName': 'userCar/add',
			'methods': 'post',
			'ajaxData': {
				values: { //往后台传消息
					brand_id: car_brand_id, //车系id
					type_id: typeid,//车型id
					engine_number: byValue.engine, //发动机号码
					mileage: byValue.mileage, //里程数
					car_number: json.license_name1+json.license_name2+json.car_license, //车牌
					buy_date: byValue.dateOfPurchase, //购买日期
					area: byValue.address //常用停车地点
				}
			},
			'method': backFormUpload
		});

		function backFormUpload(ret, err) {
			if (ret.code == 200) {
				console.log("添加车辆成功" + JSON.stringify(ret));
				api.toast({
					msg: '添加车辆成功',
					duration: 2000,
					location: 'bottom'
				});
				fnaddSuccess();

			} else {
				reToast(ret, err)
			}
		}
	}
	//添加成功之后跳转页面
	function fnaddSuccess(){
		api.openWin({
		    name: 'VehicleList',
		    url: '../html/VehicleList.html',
		    pageParam: {
		        name: 'test'
		    }
		});

	}
	// 车牌
	var data = {
		list: ["桂", "京", "津", "沪", "渝", "冀", "豫", "云", "辽", "黑", "湘", "皖", "鲁", "新", "苏", "浙", "赣", "鄂", "甘", "晋", "蒙", "陕", "吉", "闽", "贵", "粤", "青", "藏", "川", "宁", "琼"]
	};
	var html = template('license', data);
	document.getElementById('license_content').innerHTML = html;
	//车牌字母
	var data = {
		list: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
};
	var html = template('license2', data);
	document.getElementById('license_content2').innerHTML = html;


	/*选择车型小按钮*/
	var carTa = document.getElementsByClassName('carTa');
	for (var i = 0; i < carTa.length; i++) {
		carTa[i].onclick = function() {
			var Taimg = document.getElementsByClassName("Taimg");
			var imgSrc = this.childNodes[0];
			for (var o = 0; o < Taimg.length; o++) {
				Taimg[o].setAttribute("src","../image/icon/WGX1@2x.png");
			}
			console.log(JSON.stringify(imgSrc));
			imgSrc.setAttribute("src","../image/icon/GX1@2x.png");
		}
	}
	function a() {
		var Pli = document.getElementsByClassName("Taimg");
		for (var k = 0; k < Pli.length; k++) {
						if (Pli[k].getAttribute('src').indexOf('../image/icon/GX1@2x.png') > -1) {
							if (k == 0) {
								payWay = 'carriage';
								PayName = "小轿车";
								typeid = 2;
							} else {
								payWay = 'suvv';
								PayName = "SUV";
								typeid = 1;
							}
						}
						return typeid;
					}
	}
//获取单选按钮车型
function selection() {
	var type=a();
	addform()

}



	function mine_2() {
		api.openWin({
			name: 'mine_2',
			url: '../html/mine_2.html'
		});
	}
</script>
